<template>
    <view class="content">
        <view class="header">
            <scroll-view scroll-x>
                <view class="nav" v-if="isShow">
                    <!-- examine 1审核中 2通过 3驳回 4无效 -->
                    <view class="nav-i" :class="{navActive : type == 1 && examine == 1}" @click="chooseNav(1, 1)">
                        <view>待审核</view>
                        <view>（{{ count.count11 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 1 && examine == 2}" @click="chooseNav(1, 2)">
                        <view>报备有效</view>
                        <view>（{{ count.count12 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 1 && examine == 3}" @click="chooseNav(1, 3)">
                        <view>报备无效</view>
                        <view>（{{ count.count13 }}）</view>
                    </view>
                    
                    <view class="nav-i" :class="{navActive : type == 2}" @click="chooseNav(2)">
                        <view>到访</view>
                        <view>（{{ count.count2 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 3}" @click="chooseNav(3)">
                        <view>认购</view>
                        <view>（{{ count.count3 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 4}" @click="chooseNav(4)">
                        <view>待结佣</view>
                        <view>（{{ count.count4 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 5}" @click="chooseNav(5)">
                        <view>已结佣</view>
                        <view>（{{ count.count5 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 6}" @click="chooseNav(6)">
                        <view>退户</view>
                        <view>（{{ count.count6 }}）</view>
                    </view>
                    <view class="nav-i" :class="{navActive : type == 7}" @click="chooseNav(7)" v-if="info.user_type == 1 || info.user_type == 2 || info.user_type == 6">
                    	<view>认证人员</view>
                    	<view>({{count.count7}})</view>
                    </view>
                </view>
            </scroll-view>
        </view>

        <view class="wrapper" v-if="isShow">
            <view class="item" v-for="(item, index) in list" :key="index">
                <!-- examine 1待审核 2通过 3驳回 4过期 -->
                <template v-if="type != 5 && type != 6">
                    <view class="baobei" v-if="item.examine == 1">待审核</view>
                    <view class="baobei2" v-if="item.examine == 2">有效（已通过）</view>
                    <view class="baobei" v-if="item.examine == 3">无效</view>
                    <view class="baobei" v-if="item.examine == 4">已过期</view>
                </template>
                <view class="item-l" v-if="type == 7">
                    <view>经纪人姓名：</view>
                    <view class="u-flex-1">{{item.user_name}}</view>
                </view>
                <view class="item-l" v-if="type != 7">
                    <view>客户姓名：</view>
                    <view class="u-flex-1">{{item.name}}</view>
                </view>
                <view class="item-l" v-if="type != 7">
                    <view>客户性别：</view>
                    <view class="u-flex-1">{{item.gender == 1 ? '男' : '女'}}</view>
                </view>
                <view class="item-l">
                    <view>手机号：</view>
                    <view class="u-flex-1" v-if="info.user_type == 1 || info.user_type == 2 || info.user_type == 6 || (info.user_type == 3 && item.report == 2)">
                        <text v-if="item.phone">{{ item.phone.substring(0, 3)+"****"+item.phone.substr(7) }}</text>
                    </view>
                    <view class="u-flex-1" v-else>{{item.phone}}</view>
                </view>
                <view class="item-l" v-if="item.id_number">
                    <view>身份证号：</view>
                    <view class="u-flex-1">{{item.id_number}}</view>
                </view>
                
                <template v-if="type != 7">
                    <view class="item-l">
                        <view>楼盘名称：</view>
                        <view class="u-flex-1">{{item.pro_name}}</view>
                    </view>
                    <view class="item-l">
                        <view>报备时间：</view>
                        <view class="u-flex-1">{{item.report_time}}</view>
                    </view>
                    <view class="item-l" v-if="item.resident_name">
                        <view>项目驻场：</view>
                        <view class="u-flex-1">{{item.resident_name}}</view>
                    </view>
                </template>
                
                <template v-if="type == 7">
                    <view class="list_tit" v-if="item.code">
                    	机构邀请码：{{item.code}}
                    </view>
                    <view class="list_tit">
                    	门店：{{item.stores}}
                    </view>
                </template>
                
                <!-- report == 2 没有审核按钮(只有 项目驻场 要判断) -->
                <!-- user_type 1运维经理 2运维总监 3项目驻场 4项目总监 5经纪人 6店长 7管理员 8报备专员 9策划 -->
                <view class="btns" v-if="type != 7">
                    <view class="wl-btn" @click.stop="toChat(item)">微聊</view>
                    <view class="lx-btn" @click.stop="$call(item.broker_phone)">联系经纪人</view>
                    
                    <!-- 项目驻场 -->
                    <template v-if="(type == 1 && item.examine == 1 || type == 1 && item.examine == 2 || type == 2 && item.examine == 1) && info.user_type == 3 && item.report != 2">
                        <view class="tg-btn" @click.stop="doExamine(2, item)">通过</view>
                        <view class="bh-btn" @click.stop="doReject(item)">驳回</view>
                    </template>
                    
                    <!-- 报备专员 -->
                    <template v-if="(type == 1 && item.examine == 1 || type == 1 && item.examine == 2 || type == 2 && item.examine == 1) && info.user_type == 8">
                        <view class="tg-btn" @click.stop="doExamine(2, item)">通过</view>
                        <view class="bh-btn" @click.stop="doReject(item)">驳回</view>
                    </template>
                    
                    <template v-if="type == 3 && info.user_type == 1 && item.report != 2 && item.examine == 1">
                        <view class="tg-btn" @click.stop="doExamine(2, item)">通过</view>
                        <view class="bh-btn" @click.stop="doReject(item)">驳回</view>
                    </template>
                    
                    <template v-if="type == 4 && info.user_type == 1 && item.report != 2">
                        <view class="ck-btn" @click.stop="doExamine(2, item)">退户</view>
                        <view class="wl-btn" @click.stop="doExamine(2, item)">确认</view>
                    </template>
                    
                    <view class="ck-btn" @click="toPage(item, type)">查看详情</view>
                </view>
                
                <view class="btns" v-if="type == 7">
                    <view class="ck-btn" @click="doReject(item)">驳回认证</view>
                    <view class="lx-btn" @click="doExamine(2,item)">通过认证</view>
                    <view class="ck-btn" @click="toPage(item, type)">查看详情</view>
                </view>
            </view>
        </view>
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>

        <!-- 驳回原因弹窗 -->
        <u-mask :show="show" mode="center" border-radius="14">
            <view class="popup">
                <view class="win-box2">
                    <view class="pop-cen">
                        <view class="pop-tit">驳回原因</view>
                        <textarea v-model="content" placeholder="请输入驳回原因"></textarea>
                    </view>
                    <view class="pop-btn">
                        <view @click="show = false">取消</view>
                        <view @click="doExamine(3)">确认</view>
                    </view>
                </view>
            </view>
        </u-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick:true,//连点
                show: false,
                content: '',
                info: {},
                type: 1, //1报备 2到访 3认购 4待结佣 5已结佣 6退户
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
                keyword: '',
                count: {},
                isShow: false,
                item: {},
                examine: 1,
            };
        },
        onLoad() {
            this.getInfo()
        },
        onShow() {
            this.page = 1
            this.list = []
            this.status = 'loadmore'
            this.getList()
        },
        onReachBottom() {
            if (this.page == 1) {
                return
            }
            this.getList()
        },
        onPullDownRefresh() {
            var _this = this
            _this.status = 'loadmore';
            _this.page = 1;
            _this.list = [];
            _this.getList();
            uni.stopPullDownRefresh();
        },
        methods: {
            // 微聊
            toChat(item) {
                this.$gTo('/pages/chat/chat-details?data=' + JSON.stringify(item) + '&type=2')
            },

            toPage(item, type) {
                var tab = 0
                if (item.examine == 1 || item.examine == 2 || this.type == 7) {
                    tab = 1
                } else if (item.examine == 3) {
                    tab = 2
                }
                if (this.type == 3 && item.examine == 2) {
                    // 已认证
                    // this.$gTo('/pages/kehu/subscribe-list?id='+ item.id + '&role=' + this.info.user_type)
                    this.$gTo('/pages/kehu/details-3?type=3' + '&id=' + item.id + '&role=' + this.info.user_type)
                } else {
                    // 未认证
                    if (this.type == 6) {
                        this.$gTo('/pages/kehu/details-3?type=6' + '&id=' + item.id + '&role=' + this.info.user_type)
                    } else {
                        this.$gTo('/admin/pages/auditManagement/details?id=' + item.id + '&type=' + this.type + '&tab=' + tab + '&role=' + this.info.user_type)
                    }
                }
            },

            // 驳回
            doReject(item) {
                this.item = item
                this.show = true
            },
            // 审核
            doExamine(num, item) {
                this.$ajax('reporting_examine', {
                    user_token: this.$getSync('userToken'),
                    id: num == 2 ? item.id : this.item.id, //报备id
                    status: this.type, //1报备 2到访 3认购 4认购信息 5结佣 6退户 7认证
                    examine: num, //2通过 3驳回
                    reason: this.content, //驳回原因
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.show = false
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.content = ''
                            this.item = {}
                            this.page = 1
                            this.list = []
                            this.status = 'loadmore'
                            this.getList()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },

            chooseNav(num, examine) {
                if (!examine) {
                    if (this.type == num) return
                } else {
                    if (this.type == num && this.examine == examine) return
                }
                this.type = num
                this.examine = examine
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },

            getList() {
                if (this.status == 'nomore') return;
                this.status = 'loading';
                this.$ajax('reporting_list', {
                    user_token: this.$getSync('userToken'),
                    page: this.page,
                    limit: 10,
                    type: 2, //1客户报备 2项目报备 3待审核 4已审核
                    status: this.type, //1报备 2到访 3认购 4待结佣 5已结佣 6退户 7认证
                    name: this.keyword, //搜索
                    examine: this.examine,// 1审核中 2通过 3驳回 4无效
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.count = ret.detail
                        if (ret.detail && ret.detail.data && ret.detail.data.length > 0) {
                            this.list = this.list.concat(ret.detail.data);
                            this.page++;
                            this.status = 'loadmore'
                        } else {
                            this.status = 'nomore'
                        }
                        this.isShow = true
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },

            // 获取个人信息
            getInfo() {
                this.$ajax('person_detail', {
                    user_token: this.$getSync('userToken'),
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.info = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    page {
        background-color: #f5f5f5;
        border-top: 2rpx solid #e6e6e6;
    }
    
    .header{
        width: 750rpx;
        white-space: nowrap;
        margin-bottom: 20rpx;
        background-color: #fff;
    }
    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-i {
        // width: calc(100vw / 8);
        padding: 25rpx;
        font-size: 26rpx;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .navActive {
        font-size: 28rpx;
        color: #00a1e9;
        font-weight: bold;
        border-bottom: 2rpx solid #00a1e9;
    }

    .wrapper {
        padding: 0 20rpx 50rpx;
    }

    .item {
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding: 30rpx;
    }

    .baobei {
        font-size: 28rpx;
        color: #fe6155;
        text-align: right;
        padding-bottom: 5rpx;
    }

    .baobei2 {
        font-size: 28rpx;
        color: #2fef11;
        text-align: right;
        padding-bottom: 5rpx;
    }

    .item-l {
        font-size: 24rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 10rpx;
    }

    .fail-text {
        background-color: #f5f5f5;
        padding: 20rpx;
        font-size: 24rpx;
        word-break: break-all;
        white-space: pre-line;
        margin-bottom: 20rpx;
        margin-top: 10rpx;
    }

    .btns {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .btns>view {
        font-size: 26rpx;
        line-height: 1;
        padding: 15rpx 18rpx;
        border-radius: 50rpx;
        margin-left: 15rpx;
        box-sizing: border-box;
    }

    .wl-btn {
        color: #00a1e9;
        background-color: #fff;
        border: 2rpx solid #00a1e9;
    }

    .lx-btn {
        color: #fff;
        background-color: #00a1e9;
    }

    .ck-btn {
        background-color: #f0f0f0;
    }

    .tg-btn {
        color: #fff;
        background-color: #09bb07;
    }

    .bh-btn {
        color: #fff;
        background-color: #fe6155;
    }

    .ck-btn {
        color: #000;
        background-color: #f0f0f0;
    }

    .popup {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .win-box2 {
        width: 80vw;
        background-color: #fff;
        border-radius: 20upx;
    }

    .pop-cen {
        padding: 50rpx 20rpx;
    }

    .pop-tit {
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
        padding-bottom: 25rpx;
    }

    .pop-time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15rpx;
    }

    .pop-time-r {
        width: 55vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx;
        border-radius: 10rpx;
        background-color: #f5f5f5;
    }

    .time-icon {
        width: 32rpx;
        height: 34rpx;
    }

    textarea {
        width: 100%;
        padding: 15rpx;
        border-radius: 10rpx;
        background-color: #f5f5f5;
        margin-top: 15rpx;
    }

    .pop-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 2rpx solid #e6e6e6;
    }

    .pop-btn>view {
        width: calc(80vw / 2);
        text-align: center;
        padding: 35rpx 0;
        font-size: 30rpx;
        color: #00a1e9;
    }

    .pop-btn>view:first-child {
        border-right: 2rpx solid #e6e6e6;
    }
</style>